<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素的样式</title>
    <style>
      .container {
        background-color: blue;
        width: 300px;
        height: 300px;
      }
    </style>
</head>
<body>
<div class="container"></div>
<script>
  //注意:只能操作行内样式
  var ele = document.querySelector('.container');
  //操作元素行内样式
  // ele.style.height = '400px';
  // ele.style.width = '400px';
  // ele.style.background = 'red';

  //获取样式
  // console.log(ele.style.width);
  // console.log(ele.style.height);
  // console.log(ele.style.background);

  //获得非行内样式 也可以获得行内样式（不能通过这个修改）
  console.log(window.getComputedStyle(ele).height);
  console.log(window.getComputedStyle(ele).width);
  console.log(window.getComputedStyle(ele).background);


</script>
</body>
</html>